<template>
    <div class="ui-cards">
      <div class="row">

        <div class="col-md-4">
          <div class="card">

            <div class="card-body">
              <div class="mx-auto d-block">
                <img class="rounded-circle mx-auto d-block" src="../images/admin.jpg" alt="Card image cap">
                <h5 class="text-sm-center mt-2 mb-1">Steven Lee</h5>
                <div class="location text-sm-center"><i class="fa fa-map-marker"></i> California, United States</div>
              </div>
              <hr>
              <div class="card-text text-sm-center">
                <a href="#"><i class="fa fa-facebook pr-1"></i></a>
                <a href="#"><i class="fa fa-twitter pr-1"></i></a>
                <a href="#"><i class="fa fa-linkedin pr-1"></i></a>
                <a href="#"><i class="fa fa-pinterest pr-1"></i></a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="mx-auto d-block">
                <img class="rounded-circle mx-auto d-block" src="../images/admin.jpg" alt="Card image cap">
                <h5 class="text-sm-center mt-2 mb-1">Steven Lee</h5>
                <div class="location text-sm-center"><i class="fa fa-map-marker"></i> California, United States</div>
              </div>
              <hr>
              <div class="card-text text-sm-center">
                <a href="#"><i class="fa fa-facebook pr-1"></i></a>
                <a href="#"><i class="fa fa-twitter pr-1"></i></a>
                <a href="#"><i class="fa fa-linkedin pr-1"></i></a>
                <a href="#"><i class="fa fa-pinterest pr-1"></i></a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="mx-auto d-block">
                <img class="rounded-circle mx-auto d-block" src="../images/admin.jpg" alt="Card image cap">
                <h5 class="text-sm-center mt-2 mb-1">Steven Lee</h5>
                <div class="location text-sm-center"><i class="fa fa-map-marker"></i> California, United States</div>
              </div>
              <hr>
              <div class="card-text text-sm-center">
                <a href="#"><i class="fa fa-facebook pr-1"></i></a>
                <a href="#"><i class="fa fa-twitter pr-1"></i></a>
                <a href="#"><i class="fa fa-linkedin pr-1"></i></a>
                <a href="#"><i class="fa fa-pinterest pr-1"></i></a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card">
            <div class="card-header">
              <strong class="card-title">Card Title</strong>
            </div>
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
          <div class="card-footer">
            <strong class="card-title">Card Footer</strong>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <i class="fa fa-check"></i><strong class="card-title pl-1">Card with Icon</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card with switch</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card with Label <small><span class="badge badge-success float-right mt-1">Success</span></small></strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card with Label <small><span class="badge badge-danger float-right mt-1">49</span></small></strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card border border-primary">
          <div class="card-header">
            <strong class="card-title">Card Outline</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card border border-secondary">
          <div class="card-header">
            <strong class="card-title">Card Outline</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card border border-success">
          <div class="card-header">
            <strong class="card-title">Card Outline</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card border border-info">
          <div class="card-header">
            <strong class="card-title">Card Outline</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card border border-warning">
          <div class="card-header">
            <strong class="card-title">Card Outline</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card border border-danger">
          <div class="card-header">
            <strong class="card-title">Card Outline</strong>
          </div>
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card bg-primary">
          <div class="card-body">
            <blockquote class="blockquote mb-0 text-light">
              <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer class="blockquote-footer text-light">Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card bg-secondary">
          <div class="card-body">
            <blockquote class="blockquote mb-0 text-light">
              <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer class="blockquote-footer text-light">Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card bg-success">
          <div class="card-body">
            <blockquote class="blockquote mb-0 text-light">
              <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer class="blockquote-footer text-light">Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card bg-danger">
          <div class="card-body">
            <blockquote class="blockquote mb-0 text-light">
              <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer class="blockquote-footer text-light">Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card bg-warning">
          <div class="card-body">
            <blockquote class="blockquote mb-0 text-light">
              <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer class="blockquote-footer text-light">Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card bg-info">
          <div class="card-body">
            <blockquote class="blockquote mb-0 text-light">
              <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer class="blockquote-footer text-light">Someone famous in <cite title="Source Title">Source Title</cite></footer>
            </blockquote>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card Header</strong>
          </div>
          <div class="card-body text-white bg-primary">
            <p class="card-text text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card Header</strong>
          </div>
          <div class="card-body text-white bg-secondary">
            <p class="card-text text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card Header</strong>
          </div>
          <div class="card-body text-white bg-success">
            <p class="card-text text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card Header</strong>
          </div>
          <div class="card-body text-white bg-danger">
            <p class="card-text text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card Header</strong>
          </div>
          <div class="card-body text-white bg-warning">
            <p class="card-text text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <strong class="card-title">Card Header</strong>
          </div>
          <div class="card-body text-white bg-info">
            <p class="card-text text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>



      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="../images/placeholder.png" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="../images/placeholder.png" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="../images/placeholder.png" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>




      </div> <!-- .row -->
  </div> <!-- ui-cards -->
</template>
